<template>
    <section class="item show" @mouseover="mouseOver" @mouseleave="mouseExit" :class="active">
        <div class="cover"
             style="background-image: url('//cdn.jsdelivr.net/gh/amehime/shoka@472f73dd/computer-science/note/cover.jpg');">
            <h2 class="title">二进制杂谈</h2><span>计算机科学</span>
        </div>
        <div class="info">
            <div class="ribbon"><a href="/categories/computer-science/note/" itemprop="url"
                                   title="二进制杂谈">二进制杂谈</a></div>
            <div class="inner">
                <ul class="posts">
                    <li><a title="Theme Shoka Documentation"
                           href="/categories/computer-science/note/theme-shoka-doc/">Theme Shoka
                        Documentation</a></li>
                </ul>
                <div class="meta footer"><span><a href="/categories/computer-science/"
                                                  itemprop="url" title="计算机科学"><i
                    class="ic i-flag"></i>计算机科学</a> </span><span><i class="ic i-file"></i>1 subcategories in total, 10 posts in total</span>
                </div>
                <a href="/categories/computer-science/note/" itemprop="url" title="二进制杂谈"
                   class="btn">more...</a></div>
        </div>
    </section>
</template>

<script>
export default {
    name: "TagCard",
    data(){
        return{
            active:''
        }
    },
    methods:{
        mouseOver(){
            this.active="active";
        },
        mouseExit(){
            this.active=" ";
        }
    }
}
</script>

<style scoped>

</style>
